<template>
  <div v-if="!isFromM7">
    <div v-for="(item,index) in collageList" :key="index" @click="goCollage(index)">
      <div v-if="item.otherStatus != 1" class="c-mh24 c-flex-row c-bd-b1" :class="index+1 == collageList.length ? '' : 'c-pv24'">
        <div class="c-ww210 c-hh140 c-text-hidden c-flex-row c-flex-center c-flex-shrink0 c-p c-br16">
          <vip-custom-img :cover="item.cover" :imgClass="'c-maxh210 imgCloseBig c-br16'" :fontClass="{
            boxStyle: 'c-pt20 c-pb48 c-pl12',
            name: 'c-fs32 c-text-ellipsis1 c-fw-b',
            duration: 'c-fs26'}" :content="{name: item.vipInfo.name, duration: item.vipInfo.duration, durationType: item.vipInfo.durationType}"
            v-if="item.cover && (item.cover.coverType ==1 || item.cover.coverType ==2)"/>
          <CoverImg v-else coverSizeClass="c-w100 c-h c-text-hidden c-br16" imgClass="c-br16" :coverUrl="$addXossFilter(item.cover ? item.cover : ((item.prodType == cfrom.collageVip || item.prodType == cfrom.vip) ? require('../../../assets/i/wap/course/vip.png') : ((item.prodType == cfrom.collageSvip || item.prodType == cfrom.svip) ? require('../../../assets/i/wap/course/svip.png') : require('../../../assets/defult270.png'))))" />
          <div class="timeShow" v-if="item.status == 1 || item.status == 2">距{{item.status == 1 ? '开始' : '结束'}}：
            <cj-clocker :time="timeFn(index)" format="%D 天 %H : %M : %S" @on-finish="finishFn(index)">
            </cj-clocker>
          </div>
          <div class="timeShow" v-if="item.status == 3 || item.status == 4">{{item.status == 3 ? '已结束' : '已停止'}}</div>
        </div>
        <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb">
          <div class="c-fs24 c-text-ellipsis2 c-lh36">{{item.name}}</div>
          <div>
            <div class="c-fs18 c-fc-gray c-mt20 c-text-decoration-through" v-if="!$isWxAppIos()">原价 {{'￥' | iosPriceFilter}}{{item.price}}</div>
            <div class="c-fc-xmlred c-flex-row c-aligni-center">
              <div class="c-flex-grow1 c-w0 c-flex-row c-aligni-center" v-if="!$isWxAppIos()">
                <span class="c-fs20 c-mr4">团长价</span>
                <span class="c-fs20 c-fw600">{{'￥' | iosPriceFilter}}</span>
                <span class="c-fs26 c-fw600">{{item.captainPrice}}</span>
                <span class="c-fs20 c-ml4" v-if="item.captainPriceType == 2">起</span>
              </div>
              <span class="c-fc-white c-fs24 c-ph24 c-lh48 c-br25" :class="item.status == 1 ? 'theme-fc theme-bg-10' : (item.status < 3 ? 'theme-bg-gradient' : 'c-bg-dd')">{{item.status == 1 ? '去看看' : (item.status == 2 ? '去拼团' : (item.status >= 3 ? '已结束' : ''))}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js"
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
import CoverImg from '@/components/templates/common/coverImg.vue';
import { goDetails } from "@/utils/goDetails.js";
export default {
  name: "IndexCollage",
  components: {
    VipCustomImg,
    CoverImg
  },
  created() {

  },
  //props: ['collageList'],
  props: {
    uiStyleType: {
      type: Number,
      default: 1
    },
    isFromM7: {
      type: Boolean,
      default: false
    },
    itemType: {
      type: Number,
      default: 1, //1一行一列，2一行两列，3一行三列
    },
    collageList: {
      type: Array,
      default: () => []
    },
    showCount: {
      type: Number,
      default: 1
    },
    showMore: {
      type: Number,
      default: 0,
    },
    visible:{
      type: Object,
      default: () => {
        return {
          priceVisible:true, // 价格、商品价格
          originalPriceVisible:true, // 划线价格
          dataVisible:true, // 商品数据、数据字段、数据
          statusVisible:true, // 状态
          forecastVisible:true, // 预告时间
          qrVisible:true, // 预告二维码
          vipVisible:true, // vip角标
          utilJs: utilJs
        }
      },
    }
  },
  data() {
    return {
      cfrom: global.ckFrom,
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',

    };
  },
  watch: {

  },
  methods: {
    clickMore() {
      this.$emit('clickMore')
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    timeFn: function (index) {
      let stime = this.collageList ? utilJs.getTimeByDate(this.collageList[index].startTime) : 0;
      let etime = this.collageList ? utilJs.getTimeByDate(this.collageList[index].endTime) : 0;
      let nowTime = (new Date()).getTime();
      //status 1未开始,2进行中,3已结束,4已停止
      let time = '';
      if (stime > nowTime) {
        this.collageList[index].status = 1;
        time = this.collageList[index].startTime;
      } else if (etime > nowTime) {
        this.collageList[index].status = 2;
        time = this.collageList[index].endTime;
      } else {
        this.collageList[index].status = 3;
      }
      return time;
    },
    finishFn: function (index) {
      if (this.collageList[index].status == 1) {
        this.collageList[index].status = 2;
      } else {
        this.collageList[index].status = 3;
      }
    },
    goCollage: function (index) {
      let prodType = this.collageList[index].prodType;
      let prodId = this.collageList[index].prodType == this.cfrom.edu ? this.collageList[index].jwSalesId
      : this.collageList[index].prodType == this.cfrom.collageActivity || this.collageList[index].prodType == this.cfrom.activity ? this.collageList[index].activityId
      : this.collageList[index].prodId;
      let query = {}
      if (prodType == this.cfrom.collageVip || prodType == this.cfrom.collageSvip || prodType == this.cfrom.vip || prodType == this.cfrom.svip) {
        if (this.collageList[index].status < 3) {
          query.isCollage = true;
        } else {
          prodType = this.cfrom.vip;
        }
      }
      goDetails(this, this.collageList[index].prodType, prodId, query, this.collageList[index].courseType, 1);
  }
  }
};
</script>

<style scoped>
.timeShow {
  font-size: 0.45rem;
  color: #fff;
  line-height: .7rem;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  padding: .15rem 0;
}
</style>
